<template>
  <div class="points-task-container">
    <div class="task-content-wrapper">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2>日常任务管理</h2>
        <p class="page-desc">管理用户日常行为任务，激励用户活跃度</p>
      </div>
      <!-- 统计卡片 -->
      <div class="stats-cards">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalTasks }}</div>
              <div class="stat-label">总任务数</div>
            </div>
          </div>
        </el-card>
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon active">
              <el-icon><Check /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.activeTasks }}</div>
              <div class="stat-label">启用任务</div>
            </div>
          </div>
        </el-card>
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon warning">
              <el-icon><Clock /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.expiredTasks }}</div>
              <div class="stat-label">过期任务</div>
            </div>
          </div>
        </el-card>
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon success">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalCompletions }}</div>
              <div class="stat-label">总完成次数</div>
            </div>
          </div>
        </el-card>
      </div>
      <!-- 主要内容 -->
      <el-card class="main-content align-card">
        <div class="header">
          <div class="header-left">
            <h3>任务列表</h3>
            <span class="task-count">共 {{ page.total }} 个任务</span>
          </div>
          <el-button type="primary" @click="openTaskDialog('add')" :icon="Plus">
            新增任务
          </el-button>
        </div>

        <!-- 筛选栏 -->
        <el-form :inline="true" :model="filter" class="filter-bar" label-width="90px">
          <el-form-item label="任务类型">
            <el-select v-model="filter.type" clearable placeholder="选择任务类型" style="width: 140px;">
              <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="filter.status" clearable placeholder="选择状态" style="width: 120px;">
              <el-option label="启用" value="启用" />
              <el-option label="停用" value="停用" />
            </el-select>
          </el-form-item>
          <el-form-item label="关键词">
            <el-input v-model="filter.keyword" placeholder="任务名称/描述" clearable style="width: 180px;" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doFilter" :icon="Search">查询</el-button>
            <el-button @click="resetFilter" :icon="Refresh">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 任务表格 -->
        <el-table 
          :data="tableData" 
          style="width: 100%" 
          :default-sort="{prop: 'sort', order: 'ascending'}"
          v-loading="loading"
          stripe
        >
          <el-table-column prop="name" label="任务名称" width="140" />
          <el-table-column prop="type" label="任务类型" width="100">
            <template #default="scope">
              <el-tag :type="getTypeTagType(scope.row.type)">{{ scope.row.type }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="points" label="奖励积分" width="100">
            <template #default="scope">
              <span class="points-text">{{ scope.row.points }} 积分</span>
            </template>
          </el-table-column>
          <el-table-column prop="exp" label="奖励经验值" width="100">
            <template #default="scope">
              <span v-if="scope.row.exp > 0" class="exp-text">{{ scope.row.exp }} 经验</span>
              <span v-else class="no-exp">无</span>
            </template>
          </el-table-column>
          <el-table-column label="关联优惠券" width="200">
            <template #default="scope">
              <span v-if="scope.row.couponIds && scope.row.couponIds.length">
                <el-tag v-for="cid in scope.row.couponIds" :key="cid" size="small" style="margin-right:4px;">
                  {{ publishedCoupons.find(c => c.id === cid)?.name || '未知优惠券' }}
                </el-tag>
              </span>
              <span v-else style="color:#bbb;">无</span>
            </template>
          </el-table-column>
          <el-table-column prop="targetCount" label="目标数量" width="100" v-if="showTargetCountColumn">
            <template #default="scope">
              <span v-if="scope.row.targetCount">{{ scope.row.targetCount }} 次</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="condition" label="完成条件" width="220" show-overflow-tooltip />
          <el-table-column prop="period" label="周期" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.period === '每日' ? 'success' : 'info'" size="small">
                {{ scope.row.period }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="validity" label="有效期" width="160">
            <template #default="scope">
              <span v-if="scope.row.validity === 'forever'">永久有效</span>
              <span v-else-if="scope.row.validity && scope.row.validity.length === 2">
                {{ scope.row.validity[0] }} 至 {{ scope.row.validity[1] }}
              </span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="80">
            <template #default="scope">
              <el-tag :type="scope.row.status === '启用' ? 'success' : 'info'">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序" width="80" />
          <el-table-column label="操作" width="360" fixed="right">
            <template #default="scope">
              <div class="action-buttons">
                <el-button size="small" @click="editTask(scope.row)" :icon="Edit">编辑</el-button>
                <el-button size="small" @click="openRecordDialog(scope.row)" :icon="Document">记录</el-button>
                <el-button 
                  size="small" 
                  :type="scope.row.status === '启用' ? 'warning' : 'success'" 
                  @click="toggleStatus(scope.row)"
                  :icon="scope.row.status === '启用' ? 'Close' : 'Check'"
                >
                  {{ scope.row.status === '启用' ? '停用' : '启用' }}
                </el-button>
                <el-button size="small" type="danger" @click="deleteTask(scope.row)" :icon="Delete">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          v-model:current-page="page.current"
          v-model:page-size="page.size"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 50, 100]"
          style="margin-top: 20px; text-align: right;"
        />
      </el-card>

      <!-- 新增/编辑任务弹窗 -->
      <el-dialog 
        v-model="taskDialog.visible" 
        :title="taskDialog.mode === 'add' ? '新增任务' : '编辑任务'" 
        width="600px" 
        :close-on-click-modal="false"
        destroy-on-close
      >
        <el-form :model="taskDialog.form" :rules="taskRules" ref="taskFormRef" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="任务名称" prop="name">
                <el-input v-model="taskDialog.form.name" placeholder="请输入任务名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务类型" prop="type">
                <el-select v-model="taskDialog.form.type" style="width: 100%" @change="onTypeChange" placeholder="请选择任务类型">
                  <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20">
              <el-col :span="12">
                              <el-form-item label="奖励积分" prop="points">
                <el-input-number v-model="taskDialog.form.points" :min="0" style="width: 100%" placeholder="可选，不填则不奖励积分" />
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="奖励经验值" prop="exp">
                  <el-input-number v-model="taskDialog.form.exp" :min="0" style="width: 100%" placeholder="可选，不填则不奖励经验值" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="选择优惠券" prop="couponIds">
              <el-select v-model="taskDialog.form.couponIds" multiple filterable placeholder="请选择优惠券">
                <el-option
                  v-for="coupon in publishedCoupons"
                  :key="coupon.id"
                  :label="coupon.name"
                  :value="coupon.id"
                />
              </el-select>
            </el-form-item>

            <el-row :gutter="20" v-if="showTargetCountInput">
              <el-col :span="12">
                <el-form-item label="目标数量" prop="targetCount">
                  <el-input-number v-model="taskDialog.form.targetCount" :min="1" style="width: 100%" placeholder="请输入目标数量" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="完成条件" prop="condition">
              <el-input v-model="taskDialog.form.condition" :readonly="isConditionReadonly" placeholder="自动生成或手动输入完成条件" />
            </el-form-item>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="周期" prop="period">
                  <el-select v-model="taskDialog.form.period" style="width: 100%" placeholder="请选择周期">
                    <el-option label="每日" value="每日" />
                    <el-option label="仅一次" value="仅一次" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态" prop="status">
                  <el-select v-model="taskDialog.form.status" style="width: 100%" placeholder="请选择状态">
                    <el-option label="启用" value="启用" />
                    <el-option label="停用" value="停用" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="有效期" prop="validity">
                  <el-checkbox v-model="taskDialog.form.permanent">永久有效</el-checkbox>
                  <el-date-picker 
                    v-model="taskDialog.form.validity" 
                    type="daterange" 
                    value-format="YYYY-MM-DD" 
                    style="width: 70%" 
                    range-separator="至" 
                    start-placeholder="开始日期" 
                    end-placeholder="结束日期" 
                    :disabled="taskDialog.form.permanent"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="排序" prop="sort">
                  <el-input-number v-model="taskDialog.form.sort" :min="1" style="width: 100%" placeholder="请输入排序" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="任务描述" prop="desc">
              <el-input v-model="taskDialog.form.desc" type="textarea" :rows="3" placeholder="请输入任务描述" />
            </el-form-item>
          </el-form>
          <template #footer>
            <el-button @click="taskDialog.visible = false">取消</el-button>
            <el-button type="primary" @click="submitTask" :loading="submitting">保存</el-button>
          </template>
        </el-dialog>
      </div>
    </div>
  
</template>

<script setup lang="ts">
import { ref, reactive, computed, nextTick, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElForm, ElMessageBox } from 'element-plus'
import { 
  Plus, Search, Refresh, Edit, Document, Delete, Check, Close, Download,
  Document as DocumentIcon, Check as CheckIcon, Clock as ClockIcon, User as UserIcon
} from '@element-plus/icons-vue'
// 优惠券mock数据（可与CouponManage.vue保持同步）
const couponList = ref([
  { id: '1005', name: '单品特惠券', status: '发布' },
  { id: '1004', name: '无门槛券', status: '草稿' },
  { id: '1003', name: '夏日折扣券', status: '发布' },
  { id: '1002', name: '全场包邮券', status: '作废' },
  { id: '1001', name: '新用户满减券', status: '发布' }
])
const publishedCoupons = computed(() => couponList.value.filter(c => c.status === '发布'))

const typeOptions = ['注册奖励', '首单奖励', '完善资料奖励', '每日点赞', '阅读文章', '站内分享', '站外分享', '商品评价', '浏览商品', '收藏商品', '关注店铺']

// 统计数据
const stats = reactive({
  totalTasks: 11,
  activeTasks: 11,
  expiredTasks: 0,
  totalCompletions: 1250
})

// 加载状态
const loading = ref(false)
const submitting = ref(false)

const filter = reactive({ type: '', status: '', keyword: '' })
// 修改showTargetCountInput和showTargetCountColumn的判断，增加'商品评价'
const showTargetCountInput = computed(() => ['每日点赞', '阅读文章', '浏览商品', '商品评价'].includes(taskDialog.form.type))
const showTargetCountColumn = computed(() => tableData.value.some(row => ['每日点赞', '阅读文章', '浏览商品', '商品评价'].includes(row.type)))
const showSigninColumn = computed(() => false)
// 1. mock数据增加连续签到奖励
interface TaskItem {
  id: string;
  name: string;
  type: string;
  points: number;
  exp: number;
  targetCount?: number;
  condition: string;
  period: string;
  validity: string[];
  permanent?: boolean;
  status: string;
  sort: number;
  desc: string;
  signinCycle?: string;
  reissue: { enabled: boolean; grantCondition: number; monthLimit: number; desc: string };
  continuousRewards?: { day: number; points: number; exp: number }[];
  couponIds: string[];
}
const allData = ref<TaskItem[]>([
  { id: 'T000', name: '注册奖励', type: '注册奖励', points: 100, exp: 0, condition: '新用户注册', period: '仅一次', validity: ['2024-06-01', '2025-12-31'], status: '启用', sort: 0, desc: '新用户注册奖励积分', reissue: { enabled: false, grantCondition: 7, monthLimit: 2, desc: '' }, couponIds: [] },
  { id: 'T009', name: '首单奖励', type: '首单奖励', points: 200, exp: 0, condition: '完成首单', period: '仅一次', validity: ['2024-06-01', '2025-12-31'], status: '启用', sort: 9, desc: '用户完成首单奖励', reissue: { enabled: false, grantCondition: 7, monthLimit: 2, desc: '' }, couponIds: [] },
  { id: 'T010', name: '完善资料奖励', type: '完善资料奖励', points: 50, exp: 0, condition: '完善个人资料', period: '仅一次', validity: ['2024-06-01', '2025-12-31'], status: '启用', sort: 10, desc: '完善资料奖励积分', reissue: { enabled: false, grantCondition: 7, monthLimit: 2, desc: '' }, couponIds: [] },
  { id: 'T001', name: '每日点赞', type: '每日点赞', points: 2, exp: 1, targetCount: 10, condition: '', period: '每日', validity: ['2024-06-01', '2024-12-31'], status: '启用', sort: 1, desc: '每日点赞任务', reissue: { enabled: false, grantCondition: 7, monthLimit: 2, desc: '' }, couponIds: [] },
  { id: 'T002', name: '阅读文章', type: '阅读文章', points: 5, exp: 2, targetCount: 10, condition: '', period: '每日', validity: ['2024-06-01', '2024-12-31'], status: '启用', sort: 2, desc: '每日阅读文章任务', reissue: { enabled: false, grantCondition: 7, monthLimit: 2, desc: '' }, couponIds: [] },
  { id: 'T003', name: '站内分享', type: '站内分享', points: 3, exp: 1, condition: '每日站内分享', period: '每日', validity: ['2024-06-01', '2024-12-31'], status: '启用', sort: 3, desc: '每日站内分享', reissue: { enabled: false, grantCondition: 7, monthLimit: 2, desc: '' }, couponIds: [] },
  { id: 'T004', name: '站外分享', type: '站外分享', points: 5, exp: 2, condition: '每日站外分享', period: '每日', validity: ['2024-06-01', '2024-12-31'], status: '启用', sort: 4, desc: '每日站外分享', reissue: { enabled: false, grantCondition: 7, monthLimit: 2, desc: '' }, couponIds: [] },
  { id: 'T005', name: '商品评价', type: '商品评价', points: 5, exp: 1, condition: '每日商品评价', period: '每日', validity: ['2024-06-01', '2024-12-31'], status: '启用', sort: 5, desc: '每日商品评价', reissue: { enabled: false, grantCondition: 7, monthLimit: 2, desc: '' }, couponIds: [] },
  { id: 'T006', name: '浏览商品', type: '浏览商品', points: 1, exp: 1, targetCount: 20, condition: '', period: '每日', validity: ['2024-06-01', '2024-12-31'], status: '启用', sort: 6, desc: '每日浏览商品任务', reissue: { enabled: false, grantCondition: 7, monthLimit: 2, desc: '' }, couponIds: [] },
  { id: 'T007', name: '收藏商品', type: '收藏商品', points: 2, exp: 1, condition: '每日收藏商品', period: '每日', validity: ['2024-06-01', '2024-12-31'], status: '启用', sort: 7, desc: '每日收藏商品', reissue: { enabled: false, grantCondition: 7, monthLimit: 2, desc: '' }, couponIds: [] },
  { id: 'T008', name: '关注店铺', type: '关注店铺', points: 3, exp: 2, condition: '每日关注店铺', period: '每日', validity: ['2024-06-01', '2024-12-31'], status: '启用', sort: 8, desc: '每日关注店铺', reissue: { enabled: false, grantCondition: 7, monthLimit: 2, desc: '' }, couponIds: [] }
])
const page = reactive({ current: 1, size: 10, total: 0 })
const tableData = computed(() => {
  let data = allData.value
  if (filter.type) data = data.filter(row => row.type === filter.type)
  if (filter.status) data = data.filter(row => row.status === filter.status)
  if (filter.keyword) data = data.filter(row => row.name.includes(filter.keyword) || row.desc.includes(filter.keyword))
  page.total = data.length
  const startIdx = (page.current - 1) * page.size
  return data.slice(startIdx, startIdx + page.size)
})

function doFilter() { page.current = 1 }
function resetFilter() { filter.type = ''; filter.status = ''; filter.keyword = ''; page.current = 1 }

// 2. 新增/编辑任务弹窗，签到类型下增加连续签到奖励配置区
const taskDialog = reactive({
  visible: false,
  mode: 'add' as 'add' | 'edit',
  form: {
    id: '',
    name: '',
    type: '',
    points: 1,
    exp: 1,
    targetCount: 10,
    condition: '',
    period: '每日',
    validity: [] as string[],
    permanent: false,
    status: '启用',
    sort: 1,
    desc: '',
    signinCycle: '',
    reissue: { enabled: false, grantCondition: 7, monthLimit: 2, desc: '' },
    continuousRewards: [] as { day: number; points: number; exp: number }[],
    couponIds: [] as string[]
  } as TaskItem
})
const taskFormRef = ref<InstanceType<typeof ElForm> | null>(null)
const taskRules = {
  name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择任务类型', trigger: 'change' }],
  points: [{ required: false, message: '请输入奖励积分', trigger: 'blur' }],
  exp: [{ required: false, message: '请输入奖励经验值', trigger: 'blur' }],
  condition: [{ required: true, message: '请输入完成条件', trigger: 'blur' }],
  period: [{ required: true, message: '请选择周期', trigger: 'change' }],
  validity: [{ required: true, message: '请选择有效期', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
  sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
  targetCount: [
    { required: showTargetCountInput.value, message: '请输入目标数量', trigger: 'blur' }
  ]
}
const isConditionReadonly = ref(false)
function onTypeChange(val: string) {
  if (val === '每日点赞') {
    taskDialog.form.condition = `每日点赞${taskDialog.form.targetCount || 10}个评价或商品`
    isConditionReadonly.value = true
  } else if (val === '阅读文章') {
    taskDialog.form.condition = `每日阅读${taskDialog.form.targetCount || 10}篇文章`
    isConditionReadonly.value = true
  } else if (val === '浏览商品') {
    taskDialog.form.condition = `每日浏览${taskDialog.form.targetCount || 20}个商品`
    isConditionReadonly.value = true
  } else if (val === '商品评价') {
    taskDialog.form.condition = `每日商品评价${taskDialog.form.targetCount || 10}个`
    isConditionReadonly.value = true
  } else {
    taskDialog.form.condition = ''
    isConditionReadonly.value = false
  }
}
watch(() => taskDialog.form.targetCount, (val) => {
  if (taskDialog.form.type === '每日点赞') {
    taskDialog.form.condition = `每日点赞${val}个评价或商品`
  } else if (taskDialog.form.type === '阅读文章') {
    taskDialog.form.condition = `每日阅读${val}篇文章`
  } else if (taskDialog.form.type === '浏览商品') {
    taskDialog.form.condition = `每日浏览${val}个商品`
  } else if (taskDialog.form.type === '商品评价') {
    taskDialog.form.condition = `每日商品评价${val}个`
  }
})
function openTaskDialog(mode: 'add' | 'edit', row?: any) {
  taskDialog.mode = mode
  if (mode === 'add') {
    Object.assign(taskDialog.form, { id: '', name: '', type: '', points: 0, exp: 0, targetCount: 10, condition: '', period: '每日', validity: [], permanent: false, status: '启用', sort: 1, desc: '', signinCycle: '', reissue: { enabled: false, grantCondition: 7, monthLimit: 2, desc: '' }, continuousRewards: [], couponIds: [] })
    isConditionReadonly.value = false
  } else if (row) {
    Object.assign(taskDialog.form, { ...row })
    // 保证reissue对象存在
    if (!taskDialog.form.reissue) {
      taskDialog.form.reissue = { enabled: false, grantCondition: 7, monthLimit: 2, desc: '' }
    }
    isConditionReadonly.value = (row.type === '每日点赞' || row.type === '阅读文章' || row.type === '浏览商品' || row.type === '商品评价')
  }
  taskDialog.visible = true
  nextTick(() => taskFormRef.value?.clearValidate())
}
function editTask(row: any) {
  openTaskDialog('edit', row)
}
function submitTask() {
  taskFormRef.value?.validate((valid: boolean) => {
    if (!valid) return
    const formData = { ...taskDialog.form }
    if (!formData.reissue) {
      formData.reissue = { enabled: false, grantCondition: 7, monthLimit: 2, desc: '' }
    }
    if (formData.permanent) {
      formData.validity = ['forever']
    }
    if (taskDialog.mode === 'add') {
      const newId = 'T' + (Math.floor(Math.random() * 9000) + 1000)
      allData.value.unshift({ ...formData, id: newId })
      ElMessage.success('新增成功（mock）')
    } else {
      const idx = allData.value.findIndex(item => item.id === taskDialog.form.id)
      if (idx > -1) {
        allData.value[idx] = { ...formData }
        ElMessage.success('编辑成功（mock）')
      }
    }
    taskDialog.visible = false
  })
}
function toggleStatus(row: any) {
  row.status = row.status === '启用' ? '停用' : '启用'
  ElMessage.success('状态已更新')
}
function deleteTask(row: any) {
  allData.value = allData.value.filter(item => item.id !== row.id)
  ElMessage.success('删除成功')
}

// 获取任务类型标签颜色
function getTypeTagType(type: string) {
  const typeMap: Record<string, string> = {
    '每日点赞': 'success',
    '阅读文章': 'primary',
    '站内分享': 'warning',
    '站外分享': 'danger',
    '商品评价': 'info',
    '浏览商品': 'success',
    '收藏商品': 'warning',
    '关注店铺': 'primary'
  }
  return typeMap[type] || 'info'
}

// 任务完成记录mock
const mockRecords = [
  { taskId: 'T001', user: '张三/1001', finishTime: '2024-06-10 10:00', points: 2, exp: 1, remark: '每日点赞' },
  { taskId: 'T002', user: '李四/1002', finishTime: '2024-06-11 14:20', points: 5, exp: 2, remark: '阅读文章' },
  { taskId: 'T001', user: '王五/1003', finishTime: '2024-06-12 09:30', points: 2, exp: 1, remark: '每日点赞' },
  { taskId: 'T003', user: '赵六/1004', finishTime: '2024-06-13 16:45', points: 10, exp: 5, remark: '完善个人资料' }
]
const router = useRouter()
function openRecordDialog(row: any) {
  router.push({ path: '/operation/points/task-record', query: { taskId: row.id } })
}

// 新增/编辑任务弹窗，签到类型下增加连续签到奖励配置区
function addContinuousReward() {
  taskDialog.form.continuousRewards?.push({ day: 2, points: 0, exp: 0 })
}
function removeContinuousReward(idx: number) {
  taskDialog.form.continuousRewards?.splice(idx, 1)
}
</script>

<style scoped>
.points-task-container {
  padding: 32px;
  background: #f5f7fa;
  min-height: calc(100vh - 120px);
}
.task-content-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.page-header { margin-bottom: 20px; }
.page-header h2 { margin-bottom: 8px; }
.page-desc { color: #606266; font-size: 14px; }
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}
.stat-card { display: flex; align-items: center; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); background: #fff; }
.stat-content { display: flex; align-items: center; }
.stat-icon { font-size: 28px; margin-right: 15px; }
.stat-icon.active { color: #67c23a; }
.stat-icon.warning { color: #e6a23c; }
.stat-icon.success { color: #909399; }
.stat-info { display: flex; flex-direction: column; }
.stat-number { font-size: 20px; font-weight: bold; color: #303133; }
.stat-label { font-size: 14px; color: #909399; }
.main-content.align-card {
  margin: 0;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.header-left { display: flex; align-items: baseline; }
.header-left h3 { margin-right: 10px; }
.task-count { font-size: 14px; color: #909399; }
.filter-bar { margin-bottom: 16px; }
.filter-actions-row { margin-top: 8px; display: flex; gap: 12px; }
.el-table .points-text { color: #f56c6c; font-weight: bold; }
.el-table .exp-text { color: #67c23a; font-weight: bold; }
.el-table .no-exp { color: #909399; }
.record-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.record-info { display: flex; align-items: baseline; }
.record-title { font-size: 16px; font-weight: bold; margin-right: 10px; }
.record-count { font-size: 14px; color: #909399; }
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
}
.continuous-reward-block {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px 16px 8px 16px;
  margin-bottom: 8px;
  border: 1px solid #ebeef5;
}
.continuous-reward-item {
  background: #fff;
  border-radius: 6px;
  padding: 12px 16px 8px 16px;
  margin-bottom: 14px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.reward-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.reward-row:last-child { margin-bottom: 0; }
.reward-input {
  width: 120px !important;
}
.remove-btn {
  margin-left: 16px;
}
.add-reward-btn {
  margin-top: 4px;
}
</style> 